<template>
  <div>
    <div class="flex mb-4">
      <a-select
        class="flex-1"
        placeholder="角色列表，请选择"
        @change="handleRoleChange"
      >
        <a-select-option
          v-for="item in filteList()"
          :value="item.id"
          :key="item.id"
          >{{ item.name }}</a-select-option
        >
      </a-select>
      <a-button type="primary" class="my-add-btn ml-4" @click="addUserRole()">
        添加到此用户
      </a-button>
    </div>
    <a-list :grid="{ gutter: 16, column: 2 }" :data-source="myList" class="my-list overflow-y-auto" style="height: 575px;">
      <a-list-item slot="renderItem" slot-scope="item">
        <a-card :title="item.name">
          <a-icon
            class="hover:text-red-600"
            slot="extra"
            type="close-circle"
            theme="filled"
            @click="deleteUserRole(item.id)"
          />
        </a-card>
      </a-list-item>
    </a-list>
  </div>
      <!-- <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-button :style="{ marginRight: '8px' }" @click="onCloseForConfig">
          取消
        </a-button>
      </div> -->
</template>

<script>
export default {
  name: "List",
  props: {
    tempForm: {
      type: Object,
      default: () => {
        return {}
      },
    }
  },
  data() {
    return {
      form: {},
      roleList: [],
      myList: [],
      currentRole: "",
    };
  },
  mounted() {
    this.findRoleList();
    this.findUserRoleList();
  },
  methods: {
    save() {
      this.$emit('pass', null);
    },
    findRoleList() {
      this.$ajax({
        url: this.$api.system.role.findRoleList,
        data: {},
        success: (result) => {
          this.roleList = result;
        },
      });
    },
    handleRoleChange(value) {
      this.currentRole = value;
    },
    deleteUserRole(id) {
      this.$ajax({
        url: this.$api.system.user.deleteUserRole,
        data: { id },
        success: (result) => {
          this.$message.success("删除成功");
          this.findUserRoleList();
        },
      });
    },
    addUserRole(value) {
      if (this.currentRole) {
        this.$ajax({
          url: this.$api.system.user.addUserRole,
          data: {
            user_id: this.tempForm.id,
            role_id: this.currentRole,
          },
          success: (result) => {
            this.currentRole = ""
            this.$message.success("新增成功");
            this.findUserRoleList();
          },
        });
      } else {
        this.$message.warning("请选择职位");
      }
    },
    findUserRoleList() {
      this.$ajax({
        url: this.$api.system.user.findRoleListByUserId,
        data: {
          user_id: this.tempForm.id,
        },
        success: (result) => {
          this.myList = result;
        },
      });
    },
    filteList(){
      if (this.myList && this.myList.length) {
        let myListArr = '';
        this.myList.map(item => {
          myListArr += item.role_id + ','
        })
        return this.roleList.filter(item => !myListArr.includes(item.id + ','));
      } else {
        return this.roleList;
      }
    },
  }, // methods
};
</script>
<style lang="less" scoped>
.my-add-btn{
  height: 40px;
}
/deep/ .ant-list-item{
  border-radius: 4px;
}
::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
</style>